<template>
<div>
  <el-card>
    <el-table
      stripe
      :data="menuList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :tree-props="{children: 'children'}">
      <el-table-column
        label="名称"
        prop="name"
        sortable
        width="300">
      </el-table-column>
      <el-table-column
        label="权限值"
        prop="code"
        width="300"
      ></el-table-column>
      <el-table-column
        label="跳转路由权限值"
        porp="toCode"
        width="300"
      >
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
<!--          添加菜单-->
          <el-button type="success" size="mini" @click="openAdd(scope.row)">添加</el-button>
<!--          编辑菜单-->
          <el-button type="primary" size="mini" @click="openEdit(scope.row)">编辑</el-button>
<!--          删除菜单-->
          <el-popconfirm
            style="margin-left: 15px"
            title="确定要删除此权限吗"
            @onConfirm="deletePower(scope.row)"
          >
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

<!--    添加或更新菜单-->
    <el-dialog
      :title="diaTitle"
      :visible.sync="addOrEditDia"
      width="50%"
      :before-close="handleClose">
      <el-form label-width="140px" :rules="checkRule" ref="menuRef" :model="menuInfo">
        <el-form-item label="父级名称" v-if="menuInfo.level>2 && !menuInfo.id">
          <el-input :value="menuInfo.pname"  disabled/>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="menuInfo.name"/>
        </el-form-item>

        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="menuInfo.code"/>
        </el-form-item>

        <el-form-item label="跳转路由权限值" prop="toCode" v-if="menuInfo.level===4">
          <el-input v-model="menuInfo.toCode"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="addOrEditMenu">确 定</el-button>
  </span>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
/*
*     code: "Acl" // 标识名称
      deleted: false
      gmtCreate: "2020-11-30 16:40:08"
      gmtModified: "2020-11-30 16:40:08"
      id: "1333329957008228353"
      level: 2
      name: "权限管理"
      pid: "1" // 所属节点的id
      select: false
      status: null
      toCode: ""
      type: 1  // 1: 路由 2: 按钮
      * */
import cloneDeep from 'lodash/cloneDeep'

// 菜单权限校验的规则
const menuRules = {
  name: [{required: true, message: '名称必须输入', trigger:'blur'}],
  code: [{required: true, message: '权限值必须输入', trigger:'blur'}],
}

// 按钮功能权限校验的规则
const btnRules = {
  name: [{required: true, message: '名称必须输入',trigger:'blur'}],
  code: [{required: true, trigger: 'blur', message: '功能权限值必须输入'}]
}

export default {
  name: "Menu",
  data(){
    return {
      addOrEditDia: false,

      menuList:[], //菜单权限列表
      // 添加或者更新的权限信息
      menuInfo: {
        level: 0,
        name: '',
        code: '',
        toCode: ''
      },

      // 添加或者更新的表单验证规则
      addOREditRules:{
        temporaryName:[{required:true,message:'权限名不可以为空',trigger: 'blur'}]
      }
    }
  },
  methods:{
    // 获取总权限列表
    async getAllPower() {
      let res = await this.$API.menu.apiGetMenu()
      if (res.code === 20000) {
        console.log(res.data)
        this.menuList = res.data.children
      } else {
        this.$message.error('数据获取失败')
      }
    },

    // 删除权限
    async deletePower(row){
      let res  = await this.$API.menu.apiDeletePower(row.id)
      if(res.code === 20000) {
        this.$message.success('删除成功')
        this.getAllPower()
      }else {
        this.$message.error('删除失败')
      }
    },
    // 添加或者修改权限
    async addOrEditMenu(row){
      this.$refs.menuRef.validate(async valid=>{
        if(valid) {
          // 修改权限
          if(this.menuInfo.id) {
            let res = await this.$API.menu.apiUpdatePower(this.menuInfo)
            if(res.code===20000) {
              this.$message.success('更新成功')
              this.getAllPower()
              this.handleClose()
            }else{
              this.$message.error('添加失败')
            }
          }else{
            // 添加权限
            let {pname,...men} = this.menuInfo
            let res = await this.$API.menu.apiAddPower(men)
            if(res.code===20000) {
              this.$message.success('添加成功')
              this.getAllPower()
              this.handleClose()
            }else{
              this.$message.error('添加失败')
            }
          }
        }
      })
    },

    // 打开添加权限的dialog
    openAdd(row){
      this.addOrEditDia = true
      this.menuInfo.pid = row.id
      this.menuInfo.level = row.level + 1 // 水平
      this.menuInfo.type = this.menuInfo.level===4 ? 2 : 1 // 4的话就是按钮，不是就为路由
      this.menuInfo.pname = row.name // 用于显示父名称, 但提交请求时是不需要的
    },
    // 打开编辑权限的dialog
    openEdit(row) {
      this.addOrEditDia = true
      this.menuInfo = cloneDeep(row)
      this.menuInfo.type = this.menuInfo.level===4 ? 2 : 1 // 4的话就是按钮，不是就为路由
    },
    // 添加或者更新dialog框关闭前的回调
    handleClose(){
      this._data.menuInfo = this.$options.data().menuInfo
      this.temporaryName=''
      this.diaType = ''
      this.addOrEditDia = false
    }
  },
  computed:{
    // 计算标题
    diaTitle(){
      if(this.menuInfo.id) {
        return this.menuInfo.level===4?'修改功能':'修改菜单'
      }else{
        return this.menuInfo.level===4?'添加功能': `添加${this.menuInfo.level === 2?'一':'二'}级菜单`
      }
    },
    // 通过层级计算哪个为校验值
    checkRule(){
      return this.menuInfo.level === 4 ? menuRules : btnRules
    }
  },
  mounted() {
    // 获取总权限列表
    this.getAllPower()
  }
}
</script>

<style scoped>
.item {
  width: 100%;
}
</style>
